<template>
  <div class="film-container">
            
        <!-- 轮播图区域 -->
        <swiper></swiper> 

        <b-container class="bv-example-row">
          <!-- 院线热映区域 -->
          <div class="movie-container">
              <!-- 院线热映导航区域 -->
              <div class="divier-text">
                  <b-nav>
                      <b-nav-item>院线热映</b-nav-item>
                  </b-nav>
              </div>
              <!-- 院线热映内容区域 -->
              <b-row class="row-content">
                  <b-col cols="12" sm="12" md="6" lg="6">
                      <div class="self">
                          <b-card
                              :title="hotPlayOne.mName"
                              :img-src="hotPlayOne.mImg"
                              img-alt="Image"
                              img-top
                              tag="a"
                              href="#"
                              style="max-width: 100%;"
                              class="mb-2"
                          >
                              <b-card-text>
                              {{ hotPlayOne.mIntro }}
                              </b-card-text>
                          </b-card>
                      </div>
                  </b-col>
                  <b-col cols="12" sm="12" md="6" lg="6">
                      <b-row>
                          <b-col cols="6" sm="6" md="6" lg="6" v-for="(item,i) in hotPlayList.slice(1,3)" :key="i">
                              <div>
                                  <b-card
                                      :title="item.mName"
                                      :img-src="item.mImg"
                                      img-alt="Image"
                                      img-top
                                      tag="a"
                                      href="#"
                                      style="max-width: 20rem;"
                                      class="mb-2"
                                  >
                                      <b-card-text>
                                      {{ item.mIntro }} 
                                      </b-card-text>
                                  </b-card>
                              </div>
                          </b-col>
                      </b-row>
                      <b-row>
                          <b-col cols="6" sm="6" md="6" lg="6" v-for="(item,i) in hotPlayList.slice(3,5)" :key="i">
                              <div>
                                  <b-card
                                      :title="item.mName"
                                      :img-src="item.mImg"
                                      img-alt="Image"
                                      img-top
                                      tag="a"
                                      href="#"
                                      style="max-width: 20rem;"
                                      class="mb-2"
                                  >
                                      <b-card-text>
                                      {{ item.mIntro }} 
                                      </b-card-text>
                                  </b-card>
                              </div>
                          </b-col>
                      </b-row>
                  </b-col>
              </b-row>
          </div>
          <!-- 自制电影区域 -->
          <div class="movie-container">
              <!-- 自制电影导航区域 -->
              <div class="divier-text">
                  <b-nav>
                      <b-nav-item>自制电影</b-nav-item>
                  </b-nav>
              </div>
              <!-- 自制电影内容区域 -->
              <b-row class="row-content">
                  <b-col cols="12" sm="12" md="6" lg="6">
                      <div class="self">
                          <b-card
                              :title="movieOne.mName"
                              :img-src="movieOne.mImg"
                              img-alt="Image"
                              img-top
                              tag="a"
                              href="#"
                              style="max-width: 100%;"
                              class="mb-2"
                          >
                              <b-card-text>
                              {{ movieOne.mIntro }}
                              </b-card-text>
                          </b-card>
                      </div>
                  </b-col>
                  <b-col cols="12" sm="12" md="6" lg="6">
                      <b-row>
                          <b-col cols="6" sm="6" md="6" lg="6" v-for="(item,i) in movieList.slice(1,3)" :key="i">
                              <div>
                                  <b-card
                                      :title="item.mName"
                                      :img-src="item.mImg"
                                      img-alt="Image"
                                      img-top
                                      tag="a"
                                      href="#"
                                      style="max-width: 20rem;"
                                      class="mb-2"
                                  >
                                      <b-card-text>
                                      {{ item.mIntro }} 
                                      </b-card-text>
                                  </b-card>
                              </div>
                          </b-col>
                      </b-row>
                      <b-row>
                          <b-col cols="6" sm="6" md="6" lg="6" v-for="(item,i) in movieList.slice(3,5)" :key="i">
                              <div>
                                  <b-card
                                      :title="item.mName"
                                      :img-src="item.mImg"
                                      img-alt="Image"
                                      img-top
                                      tag="a"
                                      href="#"
                                      style="max-width: 20rem;"
                                      class="mb-2"
                                  >
                                      <b-card-text>
                                      {{ item.mIntro }} 
                                      </b-card-text>
                                  </b-card>
                              </div>
                          </b-col>
                      </b-row>
                  </b-col>
              </b-row>
          </div>
          <!-- 热搜推荐区域 -->
          <div class="movie-container">
              <!-- 热搜推荐导航区域 -->
              <div class="divier-text">
                  <b-nav>
                      <b-nav-item>热搜推荐</b-nav-item>
                  </b-nav>
              </div>
              <!-- 热搜推荐内容区域 -->
              <b-row class="row-content">
                  <b-col cols="12" sm="12" md="6" lg="6">
                      <div class="self">
                          <b-card
                              :title="hotRecommendOne.mName"
                              :img-src="hotRecommendOne.mImg"
                              img-alt="Image"
                              img-top
                              tag="a"
                              href="#"
                              style="max-width: 100%;"
                              class="mb-2"
                          >
                              <b-card-text>
                              {{ hotRecommendOne.mIntro }}
                              </b-card-text>
                          </b-card>
                      </div>
                  </b-col>
                  <b-col cols="12" sm="12" md="6" lg="6">
                      <b-row>
                          <b-col cols="6" sm="6" md="6" lg="6" v-for="(item,i) in hotRecommendList.slice(1,3)" :key="i">
                              <div>
                                  <b-card
                                      :title="item.mName"
                                      :img-src="item.mImg"
                                      img-alt="Image"
                                      img-top
                                      tag="a"
                                      href="#"
                                      style="max-width: 20rem;"
                                      class="mb-2"
                                  >
                                      <b-card-text>
                                      {{ item.mIntro }} 
                                      </b-card-text>
                                  </b-card>
                              </div>
                          </b-col>
                      </b-row>
                      <b-row>
                          <b-col cols="6" sm="6" md="6" lg="6" v-for="(item,i) in hotRecommendList.slice(3,5)" :key="i">
                              <div>
                                  <b-card
                                      :title="item.mName"
                                      :img-src="item.mImg"
                                      img-alt="Image"
                                      img-top
                                      tag="a"
                                      href="#"
                                      style="max-width: 20rem;"
                                      class="mb-2"
                                  >
                                      <b-card-text>
                                      {{ item.mIntro }} 
                                      </b-card-text>
                                  </b-card>
                              </div>
                          </b-col>
                      </b-row>
                  </b-col>
              </b-row>
          </div>
          <!-- 分割线 -->
          <Divider orientation="center" style="color:#777;">更多精彩敬请期待</Divider>
        </b-container>
  </div>
</template>

<script>
import swiper from '../subcomponents/swiper.vue'

export default {
  data(){
    return{
      hotPlayOne:[], //保存院线热映数组的第一条数据
      hotPlayList:[], //保存院线热映的数组
      movieOne:[], //保存电影数组的第一条数据
      movieList:[], //保存电影的数组
      hotRecommendOne:[], // 存放热搜推荐的第一条数据
      hotRecommendList:[], // 存放热搜推荐数据
    }
  },
  created() {
    this.getHotPlay();
    this.getMovie();
    this.getHotRecommend();
  },
  methods:{
    // 院线热映
    getHotPlay(){
        this.$http.get("movie/findHot").then(result => {
        this.hotPlayList = result.body.list;
        this.hotPlayOne = result.body.list[0];
    })
    },
    getMovie(){
    // 获取电影前5条内容的方法
    this.$http.get("movie/findLimit").then(result => {
        this.movieList = result.body;
        this.movieOne = result.body[0];
    })
    },
    // 热搜推荐
    getHotRecommend(){
        this.$http.get("movie/findOrderByCount").then(result => {
        this.hotRecommendList = result.body.list;
        this.hotRecommendOne = result.body.list[0];
    })
    },
      
  },
  components:{
    swiper
  }
}
</script>

<style lang="scss" scoped>
.film-container{
    a{
        color:#555;
    }
    a:hover{
        .card-title{
            color:#ef4238;
        }
    }
  .divier-text{
      padding: 0.5rem 0 0 0;
      font-size: 1.4rem;
      color:#666;
    }
  .bv-example-row{
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
}
  .row-content{
      padding-top: 1rem;
        .card:hover{
            box-shadow: 0 0 8px #e0e0e0;
        }
      .self{
          .card-body{
          .card-title {
              padding-top: 0.5rem;
              padding-left: 0.5rem;
              margin-bottom: 1rem;
              font-size: 1.3rem;
              font-weight: bold;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
          }
          .card-text{
              font-size: 1rem;
              padding-bottom: 0.4rem;
              padding-left: 0.5rem;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
          }
      }
      }
  }
  .card-body{
      padding: 0.5rem;
      .card-title {
          margin-bottom: 0rem;
          font-size: 0.9rem;
          font-weight: bold;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
      }
      .card-text{
          font-size: 0.8rem;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
      }
  }
  .main{
      font-size: 1rem;
  }
  .nav-link{
      padding: 0.5rem 0.8rem;
  }
  .main a:nth-child(1){
      padding-left: 0;
  }
  .active{
      color:#000;
  }
}
</style>